<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="ID" class="flex-50 " prop="liveId" v-if="isType('update')">
        <el-input class="cms-width" v-model="dataInfo.liveId" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="直播标题" class="flex-50 " prop="liveTitle">
        <el-input class="cms-width" v-model="dataInfo.liveTitle"></el-input>
      </el-form-item>

      <el-form-item label="直播描述" class="flex-100 " prop="liveContent">
        <el-input v-model="dataInfo.liveContent" class="cms-width" type="textarea"></el-input>
      </el-form-item>

      <el-form-item label="关联标签" class="flex-50">
        <el-select class="cms-width" v-model="dataInfo.tagId" clearable>
          <el-option v-for="(tag,index) in tagList" :key="index" :label="tag.tagName" :value="tag.tagId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="直播地址" class="flex-100 " prop="liveUrl">
        <el-input class="cms-width" v-model="dataInfo.liveUrl" :disabled="sysCreate"></el-input>
        <el-button type="primary" @click="goSysCreatePushUrl()">创建</el-button>
        <span class="gray">可手动填写直播地址或系统创建</span>
        <p style="color: red; margin-top: 8px;" v-if="dataInfo.pullFlvUrl !=''">直播观看地址：</p>
        <span class="gray">{{dataInfo.pullFlvUrl}}</span>
        <span class="gray">{{dataInfo.pullM3u8Url}}</span>
      </el-form-item>
      <el-form-item label="回放地址" class="flex-100 " prop="recordedUrl">
        <el-input class="cms-width" v-model="dataInfo.recordedUrl" :disabled="sysCreate"></el-input>
        <span class="gray">系统创建时,回放地址不用填写</span>
      </el-form-item>

      <el-form-item label="排序" class="flex-50 " prop="liveSort" v-if="false">
        <el-input class="cms-width" v-model="dataInfo.liveSort"></el-input>
      </el-form-item>

      <!--<el-form-item class="flex-50"></el-form-item>-->

      <!-- 图片上传 -->
      <el-form-item label="封面图片" class="flex-100 upload" prop="liveImage">
        <cms-upload :src='dataInfo.liveImage' class="cms-width" @change='getPath' :isMark="false" uploadPath="images">
        </cms-upload>
      </el-form-item>

      <!-- 按钮组 -->
      <div class="form-footer">
        <el-button type="warning" v-if="isType('save')" @click="add(true)" v-perms="'/sysLive/save'">提交并继续添加</el-button>
        <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/sysLive/save'">提交</el-button>
        <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/sysLive/update'">修改</el-button>
        <el-button type="info" @click="$reset">重置</el-button>
        <span class="gray" v-if="isType('save')">选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
      </div>

    </el-form>

  </section>
</template>
<script>
  import axios from "axios/index";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns], //普通表单变量
    data() {
      let required = va.required('此项必填');
      let number = va.number('必须为数字');
      return {
        rules: {//校验规则
          liveTitle: [required],
          liveSort: [required, number],
          liveUrl: [required]
        },
        sysCreate: false,
        dataInfo: {
          liveId: '',
          liveTitle: '',
          liveImage: '',
          liveContent: '',
          liveType: '',
          userId: '',
          appName: '',
          streamName: '',
          liveUrl: '',
          pullFlvUrl: '',
          pullM3u8Url: '',
          liveStatus: '',
          liveTime: '',
          liveNum: '',
          liveSort: '',
          scene: '',
          recordedUrl: '',
          createTime: '',
          updateTime: ''
        },
        tagList: []
      };
    },
    methods: {
      getPath(url) {
        this.dataInfo.liveImage = url;
      },
      getDataInfo(id, type) {
        if (type == 'update') {
          axios.post(this.$api.sysLiveGet, {liveId: id}).then(res => {
            console.log(res)
            this.dataInfo = res.body;
            if (this.dataInfo.liveStatus == 2) {
              this.sysCreate = false;
            } else {
              this.sysCreate = true;
            }
          }).catch(err => {
            console.log(err);
          });
        }
        this.loading = false;
      },
      goSysCreatePushUrl() {
        this.sysCreate = true;
        axios.post(this.$api.sysLiveCreatePushUrl, {}).then(res => {
          let data = res.body;
          this.dataInfo.appName = data.appName;
          this.dataInfo.streamName = data.streamName;
          this.dataInfo.liveUrl = data.liveUrl;
          this.dataInfo.pullFlvUrl = data.pullFlvUrl;
          this.dataInfo.pullM3u8Url = data.pullM3u8Url;
        }).catch(err => {
          console.log(err);
        });
      },
      getTagData() {
        axios.post(this.$api.contentTagList, {}).then(res => {
          this.tagList = res.body;
        }).catch(err => {
          console.log(err);
        });
      },
      update() {
        this.updateDataInfo(this.$api.sysLiveUpdate, this.dataInfo, "pageList");
      },
      add(state) {
        this.dataInfo.liveType = 1;
        this.saveDataInfo(state, this.$api.sysLiveSave, this.dataInfo, "pageList");
      },
    },
    created() {
      this.getTagData();
      this.getDataInfo(this.id, this.type);
    }
  };
</script>
<style>
  .flex-50 {
    height: 63px;
  }

  .upload {
    height: 161px;
  }
</style>
